<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<title>一个</title>
	<style>
		html,
		body {
			height: 100%;
		}
		
		body {
			height: 100%;
		}
		
		.slide-container {
			position: relative
		}
		
		.slide-wrapper {
			width: 100%;
			z-index: 1;
			width: 100%;
			position: relative;
			margin: 0;
			padding: 0;
			touch-action: pan-y;
			overflow: hidden;
		}
		
		.slide-wrapper > div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			opacity: 0;
		}
		
		.slide-wrapper >.active {
			z-index: 10;
			opacity: 1
		}
		
		.slide-wrapper .item img {
			width: 100%;
		}
		
		.slidenav__dotnav {
			width: 100%;
			z-index: 1;
			bottom: 20px;
			position: absolute;
			list-style: none;
			display: inherit;
			justify-content: center;
			text-align: center
		}
		
		.dotnav__item {
			cursor: pointer;
			display: inline-block;
			width: 40px;
			height: 3px;
			margin-right: 5px;
			margin: 0 4px;
			background: rgba(0, 0, 0, .4)
		}
		
		.slidenav__dotnav--state-highlight {
			background: #fff;
		}
		
		.slidenav__arrow {
			display: none;
			text-align: center;
			z-index: 2;
			display: inherit;
			align-self: center;
			position: absolute
		}
		
		.slidenav__arrow .icon {
			font-size: 42px;
			margin: 10px 0;
			color: #fff;
			-webkit-transition: font-size 0.25s ease-out 0s;
			-moz-transition: font-size 0.25s ease-out 0s;
			transition: font-size 0.25s ease-out 0s;
		}
		
		.slidenav:hover .slidenav__arrow {
			display: block;
			color: #fff;
		}
		
		.slidenav__arrow--prev {
			justify-content: flex-start;
			left: 0;
		}
		
		.slidenav__arrow--next {
			right: 0;
			justify-content: flex-end;
		}
		
		.uk-slideshow-scale-out {
			-webkit-animation: uk-fade-scale-15 .5s ease-in-out reverse;
			animation: uk-fade-scale-15 .5s ease-in-out reverse
		}
		
		@-webkit-keyframes uk-fade-scale-15 {
			0% {
				opacity: 0;
				-webkit-transform: scale(1.5)
			}
			100% {
				opacity: 1;
				-webkit-transform: scale(1)
			}
		}
		
		@keyframes uk-fade-scale-15 {
			0% {
				opacity: 0;
				transform: scale(1.5)
			}
			100% {
				opacity: 1;
				transform: scale(1)
			}
		}
		
		.uk-slideshow-fade-in {
			-webkit-animation: uk-fade .5s linear;
			animation: uk-fade .5s linear
		}
		
		.uk-slideshow-fade-out {
			-webkit-animation: uk-fade .5s linear reverse;
			animation: uk-fade .5s linear reverse
		}
		
		@-webkit-keyframes uk-fade {
			0% {
				opacity: 0
			}
			100% {
				opacity: 1
			}
		}
		
		@keyframes uk-fade {
			0% {
				opacity: 0
			}
			100% {
				opacity: 1
			}
		}
		
.uk-slideshow-scroll-backward-out {
    -webkit-animation: uk-slide-right .5s ease-in-out reverse;
    animation: uk-slide-right .5s ease-in-out reverse
}

@-webkit-keyframes uk-slide-right {
    0% {
        -webkit-transform: translateX(100%)
    }

    100% {
        -webkit-transform: translateX(0)
    }
}

@keyframes uk-slide-right {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

.uk-slideshow-scroll-forward-out {
    -webkit-animation: uk-slide-left .5s ease-in-out reverse;
    animation: uk-slide-left .5s ease-in-out reverse
}

@-webkit-keyframes uk-slide-left {
    0% {
        -webkit-transform: translateX(-100%)
    }

    100% {
        -webkit-transform: translateX(0)
    }
}

@keyframes uk-slide-left {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}
.uk-slideshow-scroll-backward-in {
  -webkit-animation: uk-slide-left 0.5s ease-in-out;
  animation: uk-slide-left 0.5s ease-in-out;
}
.uk-slideshow-scroll-forward-in {
  -webkit-animation: uk-slide-right 0.5s ease-in-out;
  animation: uk-slide-right 0.5s ease-in-out;
}

	</style>
</head>

<body>
	<div class="slide-container" data-slideshow>


		<div class="slide-wrapper">
			<div class="item"><img src="images/1.jpg" alt=""></div>
			<div class="item"><img src="images/2.jpg" alt=""></div>
			<div class="item"><img src="images/3.jpg" alt=""></div>
			<div class="item"><img src="images/4.jpg" alt=""></div>
			<div class="item"><img src="images/5.jpg" alt=""></div>
			<div class="item"><img src="images/6.jpg" alt=""></div>
			<div class="item"><img src="images/7.jpg" alt=""></div>
		</div>



	</div>


	<div class="slide-container" data-slideshow="{animation: 'fade'}">


		<div class="slide-wrapper">
			<div class="item"><img src="images/1.jpg" alt=""></div>
			<div class="item"><img src="images/2.jpg" alt=""></div>
			<div class="item"><img src="images/3.jpg" alt=""></div>
			<div class="item"><img src="images/4.jpg" alt=""></div>
			<div class="item"><img src="images/5.jpg" alt=""></div>
			<div class="item"><img src="images/6.jpg" alt=""></div>
			<div class="item"><img src="images/7.jpg" alt=""></div>
		</div>



	</div>


</body>

<script type="text/javascript" src="scripts/slideshow.js"></script>
<script>
	slidenav({
		dot: true, //是否开启小圆点控制
		arrow: true, //是否开启箭头控制
		speed: 1400,	//切换持续时间
		autoPlay: false, //是否自动播放
		start: 4,
		width: '60%', //SlideShow 容器宽度
		boxClass: 'slide-container', //容器类名
		listClass: 'slide-wrapper', //图片容器类名
		listItem: 'div', //图片项标签名
		delay: 4000, //自动播放延迟
		animation: 'scroll'
	})

</script>

</html>